<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-17 14:13:05
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="cusser  animated bounceInRight">
    <div class="header">
      <div @click="histry">
        <img src="../../assets/histry.png">
        返回
      </div>
      <span class="reg" style="margin-left:-0.4rem;">我的客服</span>
      <span class="log"></span>
    </div>
    <div class="header_btm">
        <img src="../../assets/mine_t.png" alt="">
        <div>
            <p>您好!</p>
            <p>很高兴为您服务</p>
        </div>
    </div>
    <div style="height:0.1rem;background:#eee;"></div>
    <div class="con">
        <div style="margin-right:0.2rem;" @click="zaixian">
            <img src="../../assets/xinxi.png" alt="">
            <p>在线反馈</p>
        </div>
        <div style="margin-left:0.2rem;background:#50DF9F;">
            <img src="../../assets/dianhua.png" alt="">
            <p>电话服务</p>
            <span>15525546043</span>
            <a :href="'tel:' + 15525546043" class="dian"></a>
        </div>
    </div>
    <div style="height:0.1rem;background:#eee;"></div>
    <div class="box">
        <p class="text1">其他联系方式：</p>
        <p class="text2">客服微信号：{{vx}}</p>
        <p class="text2">客服钉钉号：{{ding}}</p>
        <p class="text2">客服邮箱号：{{email}}</p>
        <p class="text2">客服Q Q号：{{qq}}</p>
    </div>
    <div class="bottom">服务时间为周一到周五09:00-18:00</div>
  </div>
</template>

<script>
import { check_login,get_cs_info } from "../../api/api.js";
export default {
  name: "cusser",
  data() {
    return {
      phone:'',
      vx:'',
      ding:'',
      email:'',
      qq:''
    };
  },
  mounted() {
    if (sessionStorage.getItem("mobile") != null) {
      this.phone = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.phone
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    this.get_cs_info_box()
  },
  created(){
  },
  watch: {},
  methods: {
    // 返回上一层
    histry() {
      this.$router.go(-1);
    },
    // 客服信息
    get_cs_info_box(){
        let xin=''
        get_cs_info({data:{}}).then(res=>{
            xin=JSON.parse(res.data.body.data)
            console.log(xin)
            for(let i=0;i<xin.length;i++){
                if(xin[i].value_name=="客服QQ"){
                    this.qq=xin[i].content
                }
                if(xin[i].value_name=="客服钉钉"){
                    this.ding=xin[i].content
                }
                if(xin[i].value_name=="客服微信"){
                    this.vx=xin[i].content
                }   
                if(xin[i].value_name=="客服邮箱"){
                    this.email=xin[i].content
                }
            }
        })
    },
    // 点击在线
    zaixian(){
        this.$toast('正在努力开发中，敬请期待。。.')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cusser {
  height: 100vh;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid #eee;
    div {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #979797;
      font-size: 0.14rem;
      img {
        height: 0.16rem;
        width: 0.08rem;
        margin-right: 0.08rem;
      }
    }
    .reg {
      font-size: 0.18rem;
      color: #1a2533;
      font-weight: 500;
    }
    .log {
      font-size: 0.14rem;
      color: #e82716;
      font-weight: bold;
    }
  }
  .header_btm{
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 0.12rem 0;
      img{
          height:0.45rem;
          width:0.45rem;
          border-radius: 50%;
          display: block;
          margin-right:0.2rem;
          margin-left: 0.26rem;
      }
      div{
          p{
              font-size: 0.14rem;
              &:nth-child(1){
              color:#1A2533;
                }
                &:nth-child(2){
                    color: #888;
                }
          }
          
      }
  }
  .con{
      display: flex;
      justify-content: center;
      align-items: center;
      div{
            height:1rem;
            width:1rem;
            box-shadow:0px 0.02rem 0.04rem 0px rgba(0,0,0,0.5);
            border-radius:3px;
            background: #4994fa;
            margin-top:0.33rem;
            margin-bottom: 0.32rem;
            position: relative;
            img{
                height:0.44rem;
                width:0.44rem;
                display: block;
                margin: 0 auto;
                margin-top:0.08rem;
                margin-bottom: 0.04rem;
            }
            p{
                font-size: 0.14rem;
                color:#fff;
                text-align: center;
            }
            span{
                font-size: 0.1rem;
                color:#fff;
                display: block;
                text-align: center;
            }
            .dian{
                position: absolute;
                height:1rem;
                width:1rem;
                top:0;
                left: 0;
            }
      }
  }
  .box{
      padding: 0 0.15rem;
        .text1{
            font-size: 0.14rem;
            color:#1A2533;
            margin-top:0.12rem;
        }
        .text2{
            font-size: 0.14rem;
            color: #888888;
            margin-top:0.18rem;
        }
  }
  .bottom{
      height:0.44rem;
      width: 100%;
      border-top:0.01rem solid #eee;
       position: fixed;
        bottom: 0;
      text-align: center;
      font-size: 0.12rem;
      color:#CCCCCC;
      line-height: 0.44rem;
  }
}
</style>